<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import listItem from './components/list-item.vue'
import { getQiaFanLiApi, getUserDetailsApi } from '@/services/my'
import { onLoad } from '@dcloudio/uni-app'
import { SwitchingTime } from '@/utils/tools'

const refPopup = ref()
const rules = ref({
  rule: '<p>一.如何获取积分</p><p>您可通过在麦德范官方小程序购买餐品并完成取餐时，即可获得积分。</p> <p>二、注意事项</p><p>1.积分不具有现金价值，不得转让、赠送或折换现金仅支持在规定范围内使用。</p><p>2.通过设备机器下单无法获得积分。</p><p>3.如您的订单发生变更(退款、取消订单等)，我们将撤销该订单赠送的积分。</p><p>4.积分刻有权不定时调整积分规则，并会在相应页面进行展示，请您予以关注。</p>',
})
const list = ref<any[]>([])
const pageList = ref()
const pageObj = ref({ pageNum: 1, pageSize: 10 })
const getQiaFanLi = async () => {
  const res = await getQiaFanLiApi(pageObj.value)
  total.value = res.data.total

  if (res.data && res.data.rows) {
    pageList.value = res.data.rows
    const filter = res.data.rows.map((item: any) => {
      return {
        ...item,
        yearMonths: SwitchingTime(item.createTime, '年月'),
      }
    })
    const groupedData = filter.reduce((accumulator: any, currentItem: any) => {
      const existingItem = accumulator.find(
        (item: any) => item.yearMonths === currentItem.yearMonths,
      )

      if (existingItem) {
        // 如果已经存在相同 yearMonths 的项，则将当前项添加到 filterList 中
        existingItem.filterList.push(currentItem)
      } else {
        // 否则创建一个新的项，并将其添加到 accumulator 中
        accumulator.push({
          ...currentItem,
          filterList: [currentItem],
        })
      }

      return accumulator
    }, [])
    console.log('groupedData', groupedData)
    list.value = [...groupedData, ...list.value]
    console.log('list', list.value)
  }
}

const integral = ref<number>()
/** 获取用户详情 */
const getUserDetails = async () => {
  const res = await getUserDetailsApi()
  integral.value = res.data.integral
}
onLoad(() => {
  getQiaFanLi()
  getUserDetails()
})
const total = ref(0)
const bottomText = computed(() => {
  return total.value - pageList.value?.length! > 0 ? '加载更多···' : '没有了'
})

/**触底加载 */
const scrolltolower = () => {
  console.log('触底加载')
  if (total.value - list.value?.length! <= 0) return
  pageObj.value.pageNum++
  getQiaFanLi()
}
</script>
<template>
  <view class="qiaFanLi-box">
    <view class="_title">
      <view class="_title_left"
        >{{ integral || 0 }}
        <text class="_title_right_text">积分</text>
      </view>
      <view class="_title_right" @tap="refPopup.popupOpen()">
        积分规则
        <text class="iconfont icon_questionMark"></text>
      </view>
    </view>
    <scroll-view
      class="scrollView"
      @scrolltolower="scrolltolower"
      :lower-threshold="50"
      enhanced
      :show-scrollbar="false"
      scroll-y
    >
      <listItem
        v-for="item in list"
        :key="item.id"
        :yearMonths="item.yearMonths"
        :filterList="item.filterList"
      />
      <view v-show="list?.length" class="_bottomText">{{ bottomText }}</view>
    </scroll-view>
  </view>
  <BjsRulePopup ref="refPopup" :rules="rules" :head="'积分规则'" />
</template>
<style lang="scss">
.qiaFanLi-box {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  padding: 28rpx 24rpx;
  display: flex;
  flex-direction: column;
  ._title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 16rpx;
    background: #fff;
    padding: 30rpx 28rpx;
    margin-bottom: 28rpx;
    height: 128rpx;
    ._title_left {
      color: #000;
      font-size: 48rpx;
      word-spacing: -10rpx; // 减少单词间距
      ._title_right_text {
        font-size: 32rpx;
      }
    }
    ._title_right {
      color: #808080;
      font-size: 28rpx;
      .icon_questionMark {
        font-size: 26rpx;
      }
    }
  }
  .scrollView {
    flex: 1;
    ._bottomText {
      text-align: center;
      width: 100%;
      color: #a3a3a3;
      font-size: 24rpx;
      margin: 0 0 60rpx;
    }
  }
}
</style>
